<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./基于Promise封装ajax.js"></script>
    <title>懒加载</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        width: 734px;
        height: 548px;
        background-color: rgba(175, 238, 238, 0.3);
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><img src="" alt="1" class="lazy" /></li>
      <li><img src="" alt="2" class="lazy" /></li>
      <li><img src="" alt="3" class="lazy" /></li>
      <li><img src="" alt="4" class="lazy" /></li>
      <li><img src="" alt="5" class="lazy" /></li>
    </ul>

    <script>
      let url = 'http://studentback.dfbuff.top/getMethod';
      let params = {
        type: '图片',
      };

      // Ajax('GET', url, params).then(function (res) {
      //   const imgs = document.querySelectorAll('img');

      //   res['result'].forEach(function (item, index) {
      //     // console.log(item['content']);
      //     imgs[index].setAttribute('data-src', `${item['content']}`);
      //     // console.log(imgs[index]);
      //   });

      //   loadImg('.lazy');
      //   function loadImg($tag) {
      //     let img = document.querySelectorAll($tag);

      //     if (!img.length) return;

      //     img.forEach(function (el) {
      //       if (document.documentElement.clientHeight + document.documentElement.scrollTop >= el.offsetTop) {
      //         el.classList.remove('lazy');
      //         el.src = el.dataset.src;
      //         console.log(el);
      //       }
      //     });
      //   }
      //   document.addEventListener('scroll', function () {
      //     loadImg('.lazy');
      //   });
      // });

      // (async () => {
      //   try {
      //     let res = await Ajax('GET', url, params);
      //   } catch (error) {
      //     console.log('出现错误', error);
      //   }
      // })();

      (async () => {
        try {
          let res = await Ajax('GET', url, params);

          const imgs = document.querySelectorAll('img');

          console.log(res['result']);

          // for (var k of res['result']) {
          //   console.log(k);
          // }
          res['result'].forEach(function (item, index) {
            console.log(item);
            imgs[index].setAttribute('data-src', `${item['content']}`);
          });

          loadImg('.lazy');
          function loadImg($tag) {
            let img = document.querySelectorAll($tag);

            if (!img.length) return;

            img.forEach(function (el) {
              if (document.documentElement.clientHeight + document.documentElement.scrollTop >= el.offsetTop) {
                el.classList.remove('lazy');
                el.src = el.dataset.src;
                console.log(el);
              }
            });
          }
          document.addEventListener('scroll', function () {
            loadImg('.lazy');
          });
        } catch (error) {}
      })();
    </script>
  </body>
</html>
